<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 顶部PageTools组件 -->
      <PageTools :show-before="true">
        <template #before>
          <!-- <span>本月：入职0 离职{{ dimissionCount }} 调薪{{
            salaryAdjustmentCount
          }}
            未定薪{{ inSalaryCount }}</span> -->
          <span>本月：入职 离职 调薪 未定薪</span>
        </template>
        <template #after>
          <el-button size="small" type="danger" @click="$router.push({path:'/salarys/setting'})">设置</el-button>
          <el-button size="small" type="primary" @click="$router.push({path:`/salarys/monthStatement/${yearMonth}`})">{{ yearMonth }}报表</el-button>
        </template>
      </PageTools>

      <!-- 表单复选框模块 -->
      <el-card style="margin: 10px 0">
        <el-form :model="filterForm" label-width="120px">
          <!-- 聘用形式 -->
          <el-form-item label="聘用形式:">
            <el-radio-group v-model="filterForm.hireTypeChecks">
              <el-radio
                v-for="item in hireType"
                :key="item.id"
                v-model="hireType"
                :label="item.id"
                @change="checkChange"
              >{{ item.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 员工状态 -->
          <el-form-item label="员工状态:">
            <el-radio-group v-model="filterForm.workingStateChecks">
              <el-radio
                v-for="item in workingState"
                :key="item.id"
                v-model="workingState"
                :label="item.id"
                @change="checkChangeWs"
              >{{ item.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 部门 -->
          <el-form-item label="部门:">
            <!-- <el-checkbox-group v-model="filterForm.deptsChecks">
              <el-checkbox
                v-for="item in deptsList"
                :key="item.id"
                :label="item.id"
                @change="checkChange"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group> -->
            <el-radio-group v-model="filterForm.deptsChecks">
              <el-radio
                v-for="item in deptsList"
                :key="item.id"
                v-model="deptsList"
                :label="item.name"
                style="margin:10px 30px 10px 0"
                @change="checkChangeDp"
              >{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 工资 表格 -->
      <el-card>
        <el-table :data="list" style="width: 100%" :header-cell-style="tableHeaderStyle">
          <el-table-column prop="" label="序号" type="index" />
          <el-table-column prop="username" width="100" label="姓名" />
          <el-table-column prop="mobile" label="手机" width="150" />
          <el-table-column prop="workNumber" label="工号" width="100" />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            :formatter="formatFormEmployment"
            width="100"
          />
          <el-table-column prop="departmentName" label="部门" width="100" />
          <el-table-column label="入职时间" width="120">
            <template #default="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="工资基数">
            <template #default="{ row }">
              {{ row.currentBasicSalary + row.currentPostWage }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="津贴方案"
          >通用方案</el-table-column>
          <el-table-column prop="address" label="操作" width="220">
            <template #default="{ row }">
              <el-button
                v-if="row.currentBasicSalary + row.currentPostWage > 0"
                size="small"
                type="primary"
                @click="changeSalary(row.id, row)"
              >调薪</el-button>
              <el-button
                v-else
                size="small"
                type="danger"
                @click="fixedSalary(row.id)"
              >定薪</el-button>
              <el-button
                size="small"
                @click="$router.push({path:`/salarys/detail/${yearMonth}/${row.id}`})"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
          background
          layout="sizes,prev, pager, next, jumper"
          :total="page.total"
          :page-size="page.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          class="pagination"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </el-card>

      <!-- 点击定薪或调薪按钮，弹出弹窗 -->
      <el-dialog
        :visible="showDialog"
        :title="dialogTitle"
        @close="showDialog = false"
      >
        <ChangeSalarys
          v-if="dialogTitle === '调薪'"
          :user-id="userId"
          :user-salary-detail="userSalaryDetail"
          :change-salary-detail="changeSalaryDetail"
          @close="showDialog = false"
          @refresh="getSalarysList"
        />
        <FixedSalarys
          v-else
          :user-id="userId"
          @close="showDialog = false"
          @refresh="getSalarysList"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ChangeSalarys from './components/changeSalarys'
import FixedSalarys from './components/fixedSalarys'
import employmentEnum from '@/api/constant/employees'
import { getDepartments } from '@/api/departments'
import {
  getSalarysList,
  getCompanySetting,
  getSalaryDetail
} from '@/api/salarys'
export default {
  components: {
    ChangeSalarys,
    FixedSalarys
  },
  data() {
    return {
      filterForm: {
        hireTypeChecks: '',
        workingStateChecks: '',
        deptsChecks: ''
      },
      hireType: employmentEnum.hireType, // 枚举数据 聘用形式
      workingState: employmentEnum.workingState, // 枚举数据 员工状态
      deptsList: [], // 部门列表
      list: [], // 工资表格数据列表
      page: {
        page: 1,
        pageSize: 5,
        total: 0
      },
      showDialog: false,
      dialogTitle: '', // 弹出框的标题
      userId: '',
      userSalaryDetail: {}, // 用户薪资详情
      changeSalaryDetail: {}, // 传递到调薪组件中的数据
      yearMonth: '',
      selectParams: {}
      // salaryAdjustmentCount: 0, // 调薪总数
      // dimissionCount: 0, // 离职总数
      // inSalaryCount: 0 // 未定薪总数
    }
  },
  async created() {
    this.getDeptsList()
    this.getSalarysList()
  },
  methods: {
    // 设置表头单元格背景颜色 处理函数
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#fafafa'
      } else {
        return ''
      }
    },
    // 检测点击单选按钮，获取到的数据
    async checkChange() {
      console.log(this.filterForm)
      const { rows } = await getSalarysList({ page: 1, pageSize: this.page.total })
      console.log('rows', rows)
      this.list = rows.filter(item => item.formOfEmployment === Number(this.filterForm.hireTypeChecks))
    },
    async checkChangeWs() {
      const { rows } = await getSalarysList({ page: 1, pageSize: this.page.total })
      this.list = rows.filter(item => item.inServiceStatus === Number(this.filterForm.workingStateChecks))
    },
    async checkChangeDp() {
      console.log(this.filterForm)

      const { rows } = await getSalarysList({ page: 1, pageSize: this.page.total })
      this.list = rows.filter(item => item.departmentName === this.filterForm.deptsChecks)
    },
    // 获取部门列表 处理函数
    async getDeptsList() {
      // this.deptsList = await getDepartments()
      const { depts } = await getDepartments()
      this.deptsList = depts
    },
    // 获取员工工资列表 处理函数
    async getSalarysList() {
      const res = await getCompanySetting()
      this.yearMonth = res.dataMonth
      const { rows, total } = await getSalarysList({ ...this.page })
      console.log('rows', rows)
      // 把获取到的用户薪资列表rows赋值给list 在表格中渲染
      this.list = rows
      // 获取到的总条数赋值给我们自己自定义的total，渲染分页
      this.page.total = total

      /* // 离职总数
      this.dimissionCount = this.list.filter(
        (item) => item.inServiceStatus !== 1
      ).length
      // 调薪总数
      this.salaryAdjustmentCount = this.list.filter(
        (item) => item.currentBasicSalary + item.currentPostWage > 0
      ).length
      // 未定薪总数
      this.inSalaryCount = this.list.filter(
        (item) => item.currentBasicSalary + item.currentPostWage === 0
      ).length */
    },
    // 格式化 聘用形式 处理函数：利用枚举数据
    formatFormEmployment(row, column, cellValue) {
      const obj = employmentEnum.hireType.find(
        (item) => item.id === Number(cellValue)
      )
      return obj ? obj.value : '未知'
    },
    // 点击页码切换 渲染对应的工资列表
    currentChange(newPage) {
      // newPage:当前页
      this.page.page = newPage
      // 重新加载数据
      this.getSalarysList()
    },
    // 点击切换 每页显示条数 处理函数
    sizeChange(newSize) {
      this.page.pageSize = newSize
      this.getSalarysList()
    },
    // 点击调薪 弹出弹出框 处理函数
    async changeSalary(id, row) {
      this.dialogTitle = '调薪'
      this.userId = id
      this.userSalaryDetail = await getSalaryDetail(id)
      console.log(this.userSalaryDetail)
      this.changeSalaryDetail = row
      this.showDialog = true
    },
    // 点击定薪，弹出弹出框 处理函数
    fixedSalary(id) {
      this.dialogTitle = '定薪'
      this.userId = id
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  text-align: center;
}
</style>
